<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
  
  form div {
    height: 40px;
    line-height: 40px;
  }
  form div:nth-child(4) {
    height: auto;
  }
  form div span:first-child {
    display: inline-block;
    width: 100px;
  }
  .error {
    color: red;
  }
  </style>
</head>
<body>
  <div id="app">
    <form>
      <div>
        <span>用户名：</span>
        <span>
          <input type="text" v-model="name"> 
        </span>
        <span class="error" v-if="nameValid">
          用户名至少要6位
        </span>
      </div>
      <div>
          <span>密码：</span>
          <span>
            <input type="password" v-model="pwd">
          </span>
          <span class="error" v-if="pwdValid">
              密码至少要8位
            </span>
        </div>
      <div>
        <span>性别：</span>
        <span>
          <input type="radio" id="male" v-model="gender" name="sex">
          <label for="male">男</label>
          <input type="radio" id="female" v-model="gender" name="sex">
          <label for="female">女</label>
        </span>
        <span class="error" v-if="genderValid">
          必须要选择性别
        </span>
      </div>
      <div>
        <span>爱好：</span>
        <input type="checkbox" id="ball" v-model="hobby" name="hobby" value="1">
        <label for="ball">篮球</label>
        <input type="checkbox" id="sing" v-model="hobby" name="hobby" value="2">
        <label for="sing">唱歌</label>
        <input type="checkbox" id="code" v-model="hobby" name="hobby" value="3">
        <label for="code">写代码</label>
        <span class="error" v-if="hobbyValid">
          爱好必须选择2项以上
        </span>
      </div>
      <div>
        <span>职业：</span>
        <select v-model="work">
          <option value="1">教师</option>
          <option value="2">软件工程师</option>
          <option value="3">律师</option>
        </select>
        <span class="error" v-if="workValid">
          必须要选择职业
        </span>
      </div>
      <div>
        <input type="button" value="注册" @click=check>
      </div>
    </form>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    // 要求: 对各种表单元素进行双向数据绑定
    // 默认情况下, 错误信息都不显示.
    // 在点击注册按钮的时候, 根据表单中的数据, 显示出对应的错误信息
    var vm = new Vue({
      el: '#app',
      data: {
        name:"",
        gender:"",
        work:"",
        hobby:[],
        pwd:"",
        nameValid:false,
        pwdValid:false,
        genderValid:false,
        hobbyValid:false,
        workValid:false

      },
      methods: {
        check(){
          this.nameValid=this.name.length>=6?false:true
          this.pwdv=this.pwd.length>=8?false:true
          this.genderValid=this.pwd?false:true
          this.hobbyValid=this.hobby.length>=2?false:true
          this.workValid=this.work?false:true
        }
      }
    });
  </script>
</body>
</html>
